<script>

import Logo from './Logo.vue'
import ItemSearch from './ItemSearch.vue'
import ShoppingBag from './ShoppingBag.vue'
import ItemNavigator from './ItemNavigator.vue'

export default {
    components: {
        Logo,
        ItemSearch,
        ShoppingBag,
        ItemNavigator
    },
    props: [
        "search",
        "bagUpdate",
        "categoryShow"
    ],
    watch: {
        bagUpdate(val) {
            console.log(val)
        }
    }
}
</script>

<template>
    <div class="search-bar">
        <Logo />
        <ItemSearch :search="search" />
        <ShoppingBag :update="bagUpdate" />
        <ItemNavigator :category-show="categoryShow"/>
    </div>
</template>
<style scoped>
.search-bar {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
    padding-top: 20px;
    flex-wrap: wrap;
}

.item-search {
    width: 50%;
}
</style>